<template>
  <component
    :is="tag"
    @click="onCallShare"
  >
    <slot />
    <div
      v-if="isWxQQ"
      class="tip"
      @click.stop="isWxQQ = false"
    >
      <img
        src="~assets/share/share-tip.png"
        class="tip-pic"
      >
    </div>
  </component>
</template>

<script lang="ts">
import Vue from 'vue'
import { setShareData, showShare } from 'lib/share/share'
import { getShareInfo } from '@/lib/share/shareInfo'
export default Vue.extend({
  props: {
    tag: {
      type: String,
      default: 'span',
    },
    subject: {
      type: String,
      default: void 0,
    },
    sharePath: {
      type: String,
      default: void 0,
    },
  },
  data () {
    return {
      isWxQQ: false,
    }
  },
  methods: {
    // setShareData (data: any) {
    //   setShareData(data)
    // },
    onCallShare () {
      const shareInfo = getShareInfo({
        routeName: this.$route.name!,
        subject: this.subject,
        userName: this.$route.query.uname as string,
        sharePath: this.sharePath,
      })
      // 唤起浏览器原生分享组件(如果在微信中不会唤起，此时call方法只会设置文案。类似setShareData)
      const shareData = {
        imgUrl: this.$store.state.instInfo.SchoolLogo,
        from: 'jggw',
        ...shareInfo,
      }
      const platform = showShare(shareData)
      if (platform === 'wx' || platform === 'qq') {
        this.isWxQQ = true
      } else if (platform === 'others') {
        this.$dialog.alert({
          message: '请使用您浏览器中自带的分享功能',
        })
      }
      this.$emit('shareBtnClicked')
    },
  },
})
</script>

<style lang="scss" scoped>
.tip {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 10;
}
.tip-pic {
  position: absolute;
  right: 37px;
  top: 10px;
  width: 495px;
}
</style>
